{{ define "card" }}
<div class="w-full md:w-[calc(50%-12px)] lg:w-[calc(33.333%-16px)] xl:w-[calc(25%-18px)]">
    <div class="relative group">
        <div
            class="relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-black/20">
            <!-- Image Container -->
            <div class="relative h-56 overflow-hidden">
                {{ if .Enabled }}
                    {{ if .Cover }}
                    <img src="{{ .Cover.Link }}"
                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="..."
                        loading="lazy">
                    {{ else }}
                    <img src="/assets/static/img/blank.png"
                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="...">
                    {{ end }}
                {{ end }}
            </div>

            <!-- Content Section -->
            <div class="pt-6 pl-6 pr-6 pb-3">

                <!-- Title -->
                <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ if .Enabled }}
                    {{ .Title }}
                    {{ else }}
                    ⠀
                    {{ end }}
                </h5>

                <!-- Creator Content -->
                <h6 class="text-gray-700 dark:text-gray-400 text-clamp-3 mb-4">
                    {{ if .Creator }}
                    {{ .Creator }}
                    {{ else }}
                    ⠀
                    {{ end }}
                </h6>

                <!-- Text Content -->
                <p id="text_{{ .ID }}" class="text-gray-700 dark:text-gray-300 mb-6 line-clamp-3">
                    {{ if .Enabled }}
                    {{ .Text }}
                    {{ else }}
                    ⠀
                    {{ end }}
                </p>

                <!-- Button -->
                {{ if .Enabled }}
                <!-- open-modal-button -->
                <a href="/play/{{ .ID }}" type="button" class="flex flex-col w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200" data-item-id="{{ .ID }}">
                    <span class="flex items-center justify-center gap-2">
                        Launch
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                clip-rule="evenodd" />
                        </svg>
                    </span>
                </a>
                {{ else }}
                <button type="button" class="w-full px-6 py-3 bg-gray-600 text-white rounded-xl 
                           font-medium">
                    <span class="flex items-center justify-center gap-2">
                        . . .
                    </span>
                </button>
                {{ end }}
            </div>

            <!-- Feature tags -->
            {{ if .Features }}
            <div class="px-6 py-4 flex items-center">
                <div class="grid grid-cols-5">
                    {{ range .Features }}
                        {{ template "feature_elem" . }}
                    {{ end }}
                </div>
            </div>
            {{ end }}

            <!-- Footer -->
            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80">
                <div class="flex items-center justify-between">
                    <small class="text-gray-600 dark:text-gray-400">
                        {{ if .Enabled }}
                        {{ .FooterText }}
                        {{ else }}
                        ⠀
                        {{ end }}
                    </small>
                    {{ if .IsNew }}
                    <div class="flex items-center gap-2">
                        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium 
                                   bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300">
                            <span class="w-2 h-2 rounded-full bg-red-600 dark:bg-red-400"></span>
                            New
                        </span>
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</div>
    {{ if .Enabled }}
    <script>
        document.getElementById("text_{{ .ID }}").innerHTML = marked.parse("{{ .Text }}");
    </script>
    {{ end }}
{{ end }}